<template>
  <transition name="el-drawer-fade">
    <div
      class="common-drawer-wrap"
      v-if="visible"
      :style="{ width: `${width}px` }"
      @click.stop="clickDrawer"
    >
      <div class="drawer-header">
        <div class="drawer-header-title">{{ title }}</div>
        <div class="drawer-header-close" @click="closeDrawer">
          <i class="el-dialog__close el-icon el-icon-close"></i>
        </div>
      </div>
      <div class="drawer-content">
        <slot></slot>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: "CommonDrawer",
  props: {
    title: {
      type: String,
    },
    visible: {
      type: Boolean,
      default: true,
    },
    width: {
      type: Number,
      default: 300,
    },
  },
  data() {
    return {};
  },
  methods: {
    closeDrawer() {
      this.$emit("update:visible", false);
    },
    clickDrawer() {},
  },
};
</script>

<style scoped lang="scss">
.common-drawer-wrap {
  position: absolute;
  right: 2px;
  top: 12px;
  height: calc(100% - 24px);
  z-index: 99;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.2) 0 0 12px 0;

  .drawer-header {
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;

    .drawer-header-title {
      font-size: 14px;
      font-weight: bold;
    }

    .drawer-header-close {
      cursor: pointer;
    }
  }

  .drawer-content {
    width: 100%;
    height: calc(100% - 36px);
    padding: 0 12px;
    overflow-y: scroll;
  }
}
</style>
